<template>
  <view class="content">
    <view class="searchBox" :style="'padding-top:' + statusBarHeight + 'px;'">
      <text class="icon" @tap="goBack">&#xe64e;</text>
      <view class="search">
        <u-search style="flex: 1;" placeholder="请输入内容" v-model="searchValue" :show-action="false" :height="72"
          class="searchInput" input-align="left"></u-search>
        <view class="searchBtn" @tap="searchInfo()">搜索</view>
      </view>
    </view>
    <view class="searchContent">
      <view class="searchHistory" v-show="historyList.length">
        <view class="history">
          <view>搜索历史</view>
          <text class="icon" style="color: #D12C25;font-size: 40rpx;" @tap="deleteHistory">&#xe63a;</text>
        </view>
        <view class="historyTagBox">
          <view class="historyTag" v-for="(item, index) in historyList" :key="index" @tap="searchInfo(item)">
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="defaultContent">
        <view class="defaultTitle">大家都在搜</view>
        <view v-for="(item, index) in defaultList" :key="index" class="defaultBox">
          <view class="defaultImg">
            <view>
              <image v-if="index == 0" src="../static/image/pagesDelivery/searchone.png" mode="scaleToFill" />
              <image v-if="index == 1" src="../static/image/pagesDelivery/searchtwo.png" mode="scaleToFill" />
              <image v-if="index == 2" src="../static/image/pagesDelivery/searchthree.png" mode="scaleToFill" />
            </view>

            <view
              :style="index === 0 ? 'color: #FF0A00;' : (index === 1 ? 'color: #FF5C00;' : (index === 2 ? 'color: #FE8900;' : ''))"
              class="defaulttext">{{ item.seachSort }}</view>
          </view>
          <view>{{ item.productName }}</view>
        </view>
      </view>
    </view>

    <u-modal v-model="modalShow" :content="modalContent" :showCancelButton="true"
      @confirm="confirmDeleteHistory"></u-modal>
  </view>
</template>

<script>
let that = this
import { selectAll } from '@/api/common'
export default {
  data() {
    return {
      searchValue: "",
      historyList: [],
      modalShow: false,
      modalContent: "是否确定清空搜索历史",
      defaultList: [

      ],
      latAndLong: '',
      merchantTakeout: 0
    };
  },
  onReady() { },
  onLoad(e) {
    console.log('看看e', e)
    this.latAndLong = e.latAndLong
    this.merchantTakeout = e.merchantTakeout
    this.searchValue = e.searchValue ? e.searchValue : ''
    console.log('看看tabbarid', e.tabbarId)
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    if (
      uni.getStorageSync("deliveryHistory") &&
      uni.getStorageSync("deliveryHistory").length
    ) {
      this.historyList = uni.getStorageSync("deliveryHistory");
      console.log(this.historyList)
    }
  },
  onShow() {
    this.personsearch()
  },
  methods: {
    searchInfo(item) {
      console.log(item)
      if (item) {
        this.searchValue = item
      }
      if (!this.searchValue) {
        this.$u.toast("请输入搜索内容");
        return;
      }
      if (this.historyList.length == 10) {
        this.historyList.splice(9, 1);
      } else {
        this.historyList.forEach((e, eIndex) => {
          if (e == this.searchValue) {
            this.historyList.splice(eIndex, 1);
          }
        })
      }
      this.historyList.unshift(this.searchValue);
      uni.setStorageSync("deliveryHistory", this.historyList);
      console.log(this.searchValue, '看看搜索')
      uni.redirectTo({
        url:
          "/pagesDelivery/deliverySearchResult?searchValue=" + this.searchValue + '&latAndLong=' + this.latAndLong + '&merchantTakeout=' + this.merchantTakeout
      });
      this.searchValue = "";
    },
    deleteHistory() {
      this.modalShow = true;
    },
    confirmDeleteHistory() {
      uni.removeStorageSync("deliveryHistory");
      this.historyList = [];
    },
    goBack() {
      uni.navigateBack({ delta: 1 })
    },
    //大家都在搜
    personsearch() {
      selectAll().then(res => {
        console.log('大家都在搜', res)
        this.defaultList = res.rows
      })
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  background: #e6e6e6;
}

.searchBox {
  padding: 32rpx;
  background: #e6e6e6;
  display: flex;
  align-items: center;

  .search {
    display: flex;
    align-items: center;
    flex: 1;
    background: white;
    border-radius: 84rpx;
    margin-left: 16rpx;

    .searchBtn {
      padding: 16rpx 40rpx;
      color: #d12c25;
    }
  }
}

::v-deep .searchInput .u-content {
  background-color: white !important;
  padding-right: 0 !important;
}

::v-deep .searchInput .u-input {
  background-color: white !important;
}

::v-deep .searchInput .u-input .uni-input-wrapper {
  color: #000000;
}

::v-deep .searchInput .u-input .uni-input-wrapper .uni-input-placeholder .u-placeholder-class {
  color: #000000;
}

.searchContent {
  border-radius: 12rpx 12rpx 0rpx 0rpx;
  background: white;
  padding: 32rpx;

  .searchHistory {
    margin-bottom: 24rpx;

    .history {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      height: 44rpx;
      font-style: normal;

      image {
        width: 28rpx;
        height: 28rpx;
      }
    }

    .historyTagBox {
      display: flex;
      flex-wrap: wrap;

      .historyTag {
        max-width: 200rpx;
        padding: 4rpx 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #494949;
        font-style: normal;
        background: #f3f3f3;
        border-radius: 24rpx;
        margin-right: 24rpx;
        display: flex;
        align-items: center;
        margin-top: 18rpx;

        text {
          overflow: hidden;
          /* 确保内容超出元素时会被隐藏 */
          white-space: nowrap;
          /* 确保文本在一行内显示，避免换行 */
          text-overflow: ellipsis;
          /* 用省略号表示被截断的文本 */
        }
      }
    }
  }

  .defaultContent {
    .defaultTitle {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .defaultBox {
      margin-top: 18rpx;
      display: flex;
      align-items: center;

      .defaultImg {
        width: 33rpx;
        height: 44rpx;
        margin-right: 30rpx;
        position: relative;
        font-family: DIN, DIN;
        font-weight: bold;
        font-size: 28rpx;
        color: #FF0A00;

        image {
          width: 33rpx;
          height: 44rpx;
        }

        .defaulttext {
          position: absolute;
          top: 0;
          left: 20%;
          z-index: 999;
          color: #FEA800
        }

        .icon {
          position: absolute;
          top: -2rpx;
          left: -4rpx;
        }

        .default {
          position: absolute;
          top: -2rpx;
          left: 10rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #FEA800;
          font-style: normal;
        }
      }

      view {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
